<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="site.css" />
  </head>
  <body>
    <!--手机号码-->
    <div>
      <label for="ph_n" class="tips">手机号码:</label>
      <input
        type="text"
        name="ph_n"
        id="ph_n"
        placeholder="11位手机号"
        maxlength="11"
        required
      />
      <span class="warning">必填</span>
    </div>

    <!--密码-->
    <div>
      <label for="psw" class="tips">创建密码:</label>
      <input
        type="password"
        name="psw"
        id="psw"
        placeholder="8位密码"
        maxlength="8"
        required
      />
      <span class="warning">必填</span>
    </div>

    <!--注册邮箱-->
    <div>
      <label for="e-mail" class="tips">注册邮箱:</label>
      <input
        type="text"
        name="e-mail"
        id="e-mail"
        placeholder="例如:wustzz@sina.com"
        required
      />
      <span class="warning">必填</span>
    </div>

    <!--验证码-->
    <div>
      <label for="codeInput" class="tips">验证码:</label>
      <input type="text" id="codeInput" />
      <span
        id="captcha"
        class="captcha-area"
        style="color: rgb(9, 37, 175); background-color: rgb(182, 141, 206)"
        ><i>AB12</i></span
      >
      <span class="refresh" id="refresh"><img src="bluebut.png" width="25px" height="25px"></span>
    </div>

    <!--性别-->
    <div>
      <span class="tips">性别:</span>
      <input type="radio" id="male" name="sex" value="male" />
      <label for="male">男</label>
      <input type="radio" id="female" name="sex" value="female" />
      <label for="female">女</label>
    </div>

    <!--生日-->
    <div>
      <label for="bir" class="tips">生日:</label>
      <input type="text" name="bir" id="bir" value="年/月/日" />
    </div>

    <!--年龄-->
    <div>
      <label for="age" class="tips">年龄:</label>
      <input type="text" name="age" id="age" />
    </div>

    <!--籍贯-->
    <div>
      <span class="tips">籍贯:</span>
      <select name="area" id="area">
        <option value="hubei">湖北</option>
        <option value="hunan">湖南</option>
        <option value="shandong">山东</option>
        <option value="sshanxi">山西</option>
      </select>
      <select name="shi" id="shi">
        <option value="wuhan">武汉</option>
        <option value="jingmen">荆门</option>
        <option value="shiyan">十堰</option>
      </select>
    </div>

    <!--个人学历-->
    <div>
      <label for="xueli" class="tips">个人学历:</label>
      <select name="xueli" id="xuueli" style="width: 175px">
        <option value="xiaoxue">小学</option>
        <option value="chuzhong">初中</option>
        <option value="gaozhong">高中</option>
        <option value="benke">本科</option>
        <option value="yanjiusheng">研究生</option>
        <option value="boshi">博士</option>
      </select>
    </div>

    <!--月薪-->
    <div>
      <label for="slider" class="tips">月薪:</label>

      <input
        type="range"
        id="slider"
        min="0"
        max="10000"
        value="5000"
        step="100"
      />
      <span id="value">5000</span>
    </div>

    <!--个人爱好-->
    <div>
      <span class="tips">个人爱好:</span>
      <label for="hobby">
        <input id="hobby" value="singing" type="checkbox" name="hobby" />唱歌
      </label>
      <label for="hobby">
        <input id="hobby" value="running" type="checkbox" name="hobby" />跑步
      </label>
      <label for="hobby">
        <input id="hobby" value="swimming" type="checkbox" name="hobby" />游泳
      </label>
    </div>

    <!--个人照片-->
    <div>
      <label for="personalPhoto" class="tips">个人照片:</label>
      <input type="file" id="personalPhoto" name="personalPhoto" />
    </div>

    <!--个人简介-->
    <div>
      <label for="per" class="tips" style="align-items: center"
        >个人简介:</label
      >
      <textarea
        style="vertical-align: middle"
        id="per"
        name="per"
        rows="5"
        cols="22"
      ></textarea>
    </div>
    <!--按钮-->
    <div>
        <label class="tips"></label>
        <input style="justify-content: center" type="submit" value="登录" />
        <input style="justify-content: center" type="submit" value="重填" />
    </div>

    <script>
      function createCode() {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        let code = "";
        for (let i = 0; i < 4; i++) {
          code += chars[Math.floor(Math.random() * chars.length)];
        }
        return code;
      }

      // 更新显示
      function updateCode() {
        document.getElementById("captcha").textContent = createCode();
      }

      // 绑定事件
      document.getElementById("captcha").onclick = updateCode;
      document.getElementById("refresh").onclick = updateCode;

      // 初始生成
      updateCode();
    </script>

    <script>
      const slider = document.getElementById("slider");
      const value = document.getElementById("value");

      slider.addEventListener("input", () => {
        value.textContent = slider.value;
      });
    </script>
  </body>
</html>
